<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<link rel="stylesheet" href="../css/m.style.css" />
<link rel="stylesheet" href="../css/jqmEdit.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="glog.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(function(){
    
    //헤더버튼 
    $('.header').find('.leftBtn').toggle(
        function(){
            //모바일 OS 버전별 처리  
            var agent = navigator.userAgent;
            if(agent.indexOf('Android') != -1){ 
                if(getAndVersion(agent) <= 2.3){
                    $('#oMenu').css({'height' : 'auto','position' : 'absolute'});
                    $('#viewport').css({'max-height' : $('#oMenu').height()});
                }
            }else if(agent.indexOf('iPhone') != -1){
                if(getIVersion(agent) <= 4){
                    $('#oMenu').css({'height' : 'auto'});
                    $('#viewport').css({'max-height' : $('#oMenu').height()});
                }
            }
           $('#oMenu').show()
           $('#page').addClass('pageHide'); 
        },
        function(){
            //모바일 OS 버전별 처리 
            var agent = navigator.userAgent;
            if(agent.indexOf('android') != -1){   
                if(getAndVersion(agent) <= 2.3){
                    $('#viewport').css({'max-height' : '','position' : 'fixed'});
                }
            }else if(agent.indexOf('iPhone') != -1){
                if(getIVersion(agent) <= 4){
                    $('#viewport').css({'max-height' : ''});
                }
            }
           $('#oMenu').hide()
           $('#page').removeClass('pageHide'); 
            
        }
    
    );
    
    //메뉴  return false 는 이벤트발생시 늘어나는 메모리 쌓이는 것을 줄어주는 효과 (정확하진 않지만, a태그에 void(0) 때문에 메모리가 계속 쌓이는 것 같음)
    $('#oMenu').find('.menuLink').click(function(){
       $('.menuOn').removeClass('menuOn');
       $(this).parent().addClass('menuOn'); 
       return false;
    });
    
	//기분설정
	$('#emoSel').change(function(){
		var num = $("#emoSel option:selected").index()+1;
		$(this).prevAll('.emotion').removeClass().addClass('emotion emo'+num);
	});
	//터치설정
	$('.itemList').swipe(function(){
		$.event.special.swipe.scrollSupressionThreshold = 10; // - default : 10
		$.event.special.swipe.durationThreshold = 800; // 터치시간 - default : 1000
		$.event.special.swipe.horizontalDistanceThreshold = 20; // 가로 한계점 (이 값보다 horizontal 값이 커야 swipe)  - default : 30
		$.event.special.swipe.verticalDistanceThreshold = 75; // 세로 한계점 (이 값보다 vertical 값이 작아야 swipe) - default : 75
		$('.fnLayer').fadeOut(200);
		var fnLayer = $(this).find('.fnLayer');
		if(fnLayer.is(':hidden')){
			fnLayer.fadeIn(200);
		}
	});
});

//OS 버전 반환 메소드 
function getAndVersion(ua){
    var vsnIndex = ua.indexOf('Android') + 8;
    //var vsnEndIndex = ua.indexOf(';',vsnIndex); // 안드로이드 전체버전 알기위해서 
    return ua.slice(vsnIndex,vsnIndex+3);
}

function getIVersion(ua){
    var vsnIndex = ua.indexOf('iPhone OS') + 10;
    return ua.slice(vsnIndex,vsnIndex+1);
}
</script>
<title>OAASYS2.0-MOBILE</title>
</head>
<body>
<div id="viewport">
    <div id="oMenu" class="oMenuLayer">
        <div class="searchPlace">
            <h2 class="blind">검색</h2>
            <form>
                <div class="searchBg"><input type="search" data-type="search" class="searchInput" placeholder="검색어  입력" /></div>
            </form>
        </div>
        <div class="oMenuPlace">
            <h2 class="blind">지로그</h2>
            <ul class="oMenuLoc">
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <i class="ico_menu i_news"></i>
                        <span>뉴스피드</span>
                    </a>
                </li>
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <i class="ico_menu i_inter"></i>
                        <span>관심</span>
                    </a>
                </li>
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <img src="img/sample_profile.gif" alt="" width="27" height="27" class="thumb">
                        <span>프로필</span>
                    </a>
                </li>
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <i class="ico_menu i_whisper"></i>
                        <span>귓속말</span>
                        <i class="newIcon"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="oMenuPlace">
            <h2 class="oMenuTitle">그룹</h2>
            <ul class="oGMenuLoc">
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <span>UX디자인</span>
                    </a>
                </li>
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <span>직장인창업노하우</span>
                        <i class="newIcon"></i>
                    </a>
                </li>
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <span>직장인창업노하우를 알려드립니다</span>
                        <i class="newIcon"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="oMenuPlace">
            <h2 class="oMenuTitle">메뉴</h2>
            <ul class="oMenuLoc">
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <i class="ico_menu i_real"></i>
                        <span>리얼지식</span>
                    </a>
                </li>
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <i class="ico_menu i_sos"></i>
                        <span>직장인SOS</span>
                    </a>
                </li>
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <i class="ico_menu i_otalk"></i>
                        <span>오톡</span>
                    </a>
                </li>
                <li class="menuList">
                    <a href="javascript:void(0);" class="menuLink">
                        <i class="ico_menu i_topic"></i>
                        <span>토픽</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div id="page" data-role="page" class="news">
        <div class="header skyblue" data-role="header" data-position="fixed">
        	<a href="javascript:void(0);" class="headBtn leftBtn" data-role="none"><i class="ico_hBtn1"></i></a>
        	<h1><a href="javascript:void(0);" class="headText" data-role="none">뉴스피드</a></h1>
        	<a href="javascript:void(0);" class="headBtn rightBtn" data-role="none"><i class="ico_hBtn2"></i></a>
        </div>
    	<div class="container" data-role="content">
            <div class="profileArea">
                <div class="coverBg"><img src="img/sample_bg.jpg" alt="" width="100%" height="auto" class="cover"></div>
                <p class="namePlace">김태희 <span class="idText">designer</span></p>
                <div class="emoPlace">
                    <i class="emotion emo1"></i>
                    <i class="openBtn"></i>
                    <select class="emoSel" id="emoSel" data-role="none">
                        <option>Happy</option>
                        <option>Joyful</option>
                        <option>Relaxed</option>
                        <option>Sorrow</option>
                        <option>Gloomy</option>
                        <option>Angry</option>
                    </select>
                </div>
                <div class="thumbPlace">
                    <img src="img/icon_medal_big.png" alt="" class="medal">
                    <span class="imgWrapper"><img src="img/sample_me.gif" alt="" class="thumb" ></span>
                </div>
                <div class="infoPlace">
                    <p class="departText"><i class="ico_top"></i>홍보/마케팅/광고</p>
                    <p class="markNum"><i class="ico_top"></i>1273</p>
                </div>
                <div class="tabPlace">
                    <a href="javascript:void(0);"><i class="ico_top picture"></i></a>
                </div>
            </div>
            <div class="tabMenu">
                <ul class="tabBlue tab3">
                    <li class="tabList tabOn"><a href="javascript:void(0);" class="tabText">관심글</a></li>
                    <li class="tabList"><a href="javascript:void(0);" class="tabText">My스토리</a></li>
                    <li class="tabList"><a href="javascript:void(0);" class="tabText">스크랩</a></li>
                </ul>
            </div>
            <ul class="myTagArea">
            	<li class="myTagList"><a href="javascript:void(0);" class="myTagText">IT개발</a></li>
            	<li class="myTagList"><a href="javascript:void(0);" class="myTagText">나의관심태그란다</a></li>
            	<li class="myTagList"><a href="javascript:void(0);" class="myTagText">IT개발</a></li>
            	<li class="myTagList"><a href="javascript:void(0);" class="myTagText">IT개발자</a></li>
            </ul>
            <div class="sortArea">
                <a href="javascript:void(0);" class="sortText sortOn"><i class="sortIcon time"></i>최신</a>
                <span class="barText">|</span>
                <a href="javascript:void(0);" class="sortText"><i class="sortIcon useful"></i>유용해요</a>
            </div>
            <ul class="itemArea">
                <li class="itemList">
                    <a href="javascript:void(0);" class="thumbLink"><span class="imgWrapper"><img src="img/sample_thumb1.gif" alt="" class="thumb"></span></a>
                    <div class="itemContent">
                        <p class="nameLoc">
                            <span class="authorText">서동현</span><span class="barText">|</span><span class="category">직장인 창업 노하우</span>
                            <span class="regidate">17:57:20</span>
                        </p>
                        <a href="javascript:void(0);" class="titleLoc">창업을 꿈꾸는 자들이 꼭 읽어야 할 "THE LEAN" 입니다.</a>
                        <p class="contentLoc">원문: <a href="javascript:void(0);" class="contentLink">http://onlinebiz.kr/archives/531</a> 창업아이디어가 있다면, 여러분이 필요한 것은 그 아이디어를 실행시키는 것...<a href="javascript:void(0);" class="moreLink">더보기</a></p>
                        <p class="picLoc" style="display:none"></p>
                        <p class="tagLoc"><strong>창업노하우</strong>, 직장생활</p>
                        <p class="infoLoc">
                            <a href="javascript:void(0);" class="infoText"><i class="ico_item reply"></i>댓글</a>
                            <span class="barText">|</span>
                            <a href="javascript:void(0);" class="infoText"><i class="ico_item useful"></i>유용해요<span class="infoNum">5</span></a>
                            <span class="barText">|</span>
                            <span class="infoText">스크랩<span class="infoNum">5</span></span>
                        </p>
                    </div>
                    <div class="fnLayer">
                        <div class="fnPlace">
                        	<span class="fnCommon">
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn1"></i>
                                    <p class="fnText">페이스북</p>
                                </a>
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn2"></i>
                                    <p class="fnText">트위터</p>
                                </a>
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn3"></i>
                                    <p class="fnText">스크랩</p>
                                </a>
                            </span>
                            <span class="fnMy">
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn4"></i>
                                    <p class="fnText">수정</p>
                                </a>
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn5"></i>
                                    <p class="fnText">삭제</p>
                                </a>
                            </span>
                        </div>
                    </div>
                </li>
                <li class="itemList">
                    <a href="javascript:void(0);" class="thumbLink"><span class="imgWrapper"><img src="img/sample_thumb1.gif" alt="" class="thumb"></span></a>
                    <div class="itemContent">
                        <p class="nameLoc">
                            <span class="authorText">서명희</span>
                            <span class="regidate">12.12.06</span>
                        </p>
                        <a href="javascript:void(0);" class="titleLoc topicLoc"><span class="typeBox">토픽</span>내가 함께 일하고 싶은 회사동료, 상사의 모습은?</a>
                        <p class="contentLoc">본인의 의견을 존중해주는 문화, 서로 헐뜯지 않는 조직, 부하의 잘못을 너그럽게 용서하는 상하관계, 회사 발전을 위해...<a href="javascript:void(0);" class="moreLink">더보기</a></p>
                        <p class="picLoc" style="display:none"></p>
                        <p class="tagLoc">조직문화, 리더십</p>
                        <p class="infoLoc">
                            <a href="javascript:void(0);" class="infoText"><i class="ico_item reply"></i>댓글<span class="infoNum">5</span></a>
                            <span class="barText">|</span>
                            <a href="javascript:void(0);" class="infoText"><i class="ico_item feedback"></i>피드백<span class="infoNum">13</span></a>
                            <span class="barText">|</span>
                            <span class="infoText">스크랩<span class="infoNum">5</span></span>
                        </p>
                    </div>
                    <div class="fnLayer">
                        <div class="fnPlace">
                        	<span class="fnCommon">
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn1"></i>
                                    <p class="fnText">페이스북</p>
                                </a>
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn2"></i>
                                    <p class="fnText">트위터</p>
                                </a>
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn3"></i>
                                    <p class="fnText">스크랩</p>
                                </a>
                            </span>
                            <span class="fnMy">
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn4"></i>
                                    <p class="fnText">수정</p>
                                </a>
                                <a href="javascript:void(0);" class="fnLink">
                                    <i class="ico_fn fn5"></i>
                                    <p class="fnText">삭제</p>
                                </a>
                            </span>
                        </div>
                    </div>
                </li>
                <li class="itemList">
                    <a href="javascript:void(0);" class="thumbLink"><span class="imgWrapper"><img src="img/sample_thumb1.gif" alt="" class="thumb"></span></a>
                    <div class="itemContent">
                        <p class="nameLoc">
                            <span class="authorText">서명희</span>
                            <span class="regidate">12.12.06</span>
                        </p>
                        <a href="javascript:void(0);" class="titleLoc" style="display:none"></a>
                        <p class="contentLoc">지난 금요일에 팀 워크샵으로 석모도에 다녀왔습니다. 날씨도 좋고, 경치도 좋고, 음식도 맛있었어요 아이맛있어...<a href="javascript:void(0);" class="moreLink">더보기</a></p>
                        <p class="picLoc">
                            <a href="javascript:void(0);" class="picLink"><span class="imgWrapper"><img src="img/sample_pic1.gif" alt=""></span></a>
                            <a href="javascript:void(0);" class="picLink"><span class="imgWrapper"><img src="img/sample_pic2.gif" alt=""></span></a>
                            <a href="javascript:void(0);" class="picLink"><span class="imgWrapper"><img src="img/sample_pic3.gif" alt=""></span></a>
                            <a href="javascript:void(0);" class="picLink"><span class="imgWrapper"><img src="img/sample_pic4.gif" alt=""></span></a>
                            <a href="javascript:void(0);" class="picLink"><span class="imgWrapper"><img src="img/sample_pic5.gif" alt=""></span></a>
                            <a href="javascript:void(0);" class="picLink"><span class="imgWrapper"><img src="img/sample_pic6.gif" alt=""></span></a>
                        </p>
                        <p class="tagLoc">워크샵, 석모도</p>
                        <p class="infoLoc">
                            <a href="javascript:void(0);" class="infoText"><i class="ico_item reply"></i>댓글<span class="infoNum">5</span></a>
                            <span class="barText">|</span>
                            <a href="javascript:void(0);" class="infoText"><i class="ico_item feedback"></i>피드백<span class="infoNum">13</span></a>
                            <span class="barText">|</span>
                            <span class="infoText">스크랩<span class="infoNum">5</span></span>
                        </p>
                    </div>
                </li>
                <li class="itemList">
                    <a href="javascript:void(0);" class="thumbLink"><span class="imgWrapper"><img src="img/sample_thumb1.gif" alt="" class="thumb"></span></a>
                    <div class="itemContent">
                        <p class="nameLoc">
                            <span class="authorText">서명희</span>
                            <span class="regidate">12.12.06</span>
                        </p>
                        <a href="javascript:void(0);" class="titleLoc"><span class="typeBox">SOS</span>신입사원이 읽어야 할 책 중에 얇고 만화 많은 것으로 추천해주세요</a>
                        <p class="contentLoc">안녕하십니까? 저는 지금 외국계(일본계)금융회사에서 수출입업무 부서에 채용되어 첫 출근을 앞두고 있습니다. 책을 읽을...<a href="javascript:void(0);" class="moreLink">더보기</a></p>
                        <p class="picLoc" style="display:none"></p>
                        <p class="tagLoc">대화법, 직장생활</p>
                        <p class="infoLoc">
                            <a href="javascript:void(0);" class="infoText"><i class="ico_item answer"></i>답변<span class="infoNum">13</span></a>
                            <span class="barText">|</span>
                            <a href="javascript:void(0);" class="infoText"><i class="ico_item useful"></i>유용해요<span class="infoNum">3</span></a>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>